<template>
    <div class="menu_container">
        <template v-for="v in menuList" >
            <el-submenu :index="v.name" :key="v.name"  v-if="v.children && v.children.length > 0">
                <template slot="title">
                     <i class="el-icon-location"></i>
                     <span slot="title">{{v.name}}</span>
                </template>
                <el-menu-item-group>
                    <my-nav :menuList="v.children"></my-nav>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item  :index="v.name" @click="gotoRoute(v.name)" v-else>
                <i class="el-icon-location"></i>
                <span slot="title">{{v.name}}</span>
            </el-menu-item>
    </template>
    </div>
</template>

<script>
    export default{
        name:'my-nav',
        props:{
            menuList:{
                type:Array,
                default:function(){
                    return []
                }
            }
        },
        methods:{
            gotoRoute(name){
                //通过Vuex存入到本地。
                this.$store.commit("SET_CURRENTMENU",name);
                 this.$router.push({name});
        
            }
        }
    }
</script>